<template>
	<view class="integral">
		<view class="times">
			<view class="" @click="show=true" v-if="startTime==''">
				点击选择时间
			</view>
			<view class="" v-else  @click="show=true">
				<text>{{startTime}}</text>
				<text>至</text>
				<text>{{endTime}}</text>
			</view>
			<u-calendar showLunar round="25" :show="show" color="#DF4647" :mode="mode" @confirm="confirm" @close="show=false"></u-calendar>
		</view>
		<view class="list">
			<view class="item">
				<view class="xinxi">
					<view class="tit">
						推荐会员奖励
					</view>
					<text class="jia">+20</text>
				</view>
				<view class="time">
					<text class="time1">2024-05-15</text>
					<text>15:25:45</text>
				</view>
			</view>

			<view class="item">
				<view class="xinxi">
					<view class="tit">
						购物抵扣
					</view>
					<text class="jian">-15</text>
				</view>
				<view class="time">
					<text class="time1">2024-05-15</text>
					<text>15:25:45</text>
				</view>
			</view>
			<view class="item">
				<view class="xinxi">
					<view class="tit">
						推荐合伙人奖励
					</view>
					<text class="jia">+50</text>
				</view>
				<view class="time">
					<text class="time1">2024-05-15</text>
					<text>15:25:45</text>
				</view>
			</view>
			<view class="item">
				<view class="xinxi">
					<view class="tit">
						消费奖励
					</view>
					<text class="jia">+10</text>
				</view>
				<view class="time">
					<text class="time1">2024-05-15</text>
					<text>15:25:45</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				mode: 'range',
				startTime:'',
				endTime:'',
			};
		},
		methods: {
			confirm(e) {
				this.startTime=e[0]
				this.endTime=e[e.length-1]
				this.show=false
			}
		}
	}
</script>

<style lang="scss" scoped>
	.integral {
		width: 100%;
		min-height: 100vh;
		overflow: hidden;
		background-color: #f7f7f7;

		.times {
			width: 94%;
			overflow: hidden;
			margin: 0 auto;
			margin-top: 30rpx;
			padding: 30rpx 20rpx;
			font-weight: 500;
			font-size: 24rpx;
			color: #333333;
			text{
				margin-right: 10rpx;
			}
		}

		.list {
			width: 94%;
			margin: 0 auto;
			padding: 20rpx 0;
			background: #FFFFFF;
			border-radius: 20rpx;
			.item:last-child {
				border-bottom: none;
			}

			.item {
				margin: 10rpx 20rpx;
				border-bottom: 1px solid #E5E5E5;

				.xinxi {
					display: flex;
					justify-content: space-between;
					padding: 10rpx 0rpx;

					.tit {
						font-weight: bold;
						font-size: 26rpx;
						color: #333333;
					}

					.jia {
						font-weight: bold;
						font-size: 28rpx;
						color: #DF4647;
					}

					.jian {
						font-weight: bold;
						font-size: 28rpx;
						color: #333333;
					}
				}

				.time {
					padding: 10rpx 0rpx;
					font-weight: 500;
					font-size: 24rpx;
					color: #999999;

					.time1 {
						margin-right: 10rpx;
					}
				}
			}
		}
	}
</style>